<template>
	<div id="unitHouseList">
		<!--工具条-->
		<div name="searchColums" id="searchColums_house">
			<el-form :inline="true" :model="houseFilters" size="small" ref="houseFilters" class="searchForm">
				<el-form-item class="el-form-item" label="房屋名称">
					<el-input v-model="houseFilters.houseName" name="houseName" auto-complete="off" placeholder="请输入房屋名称"></el-input>
				</el-form-item>
				<span class="bth_search">
					<el-form-item>
			    		<el-button type="success" icon="el-icon-search" v-on:click="getUnitHouse(true)">查询</el-button>
			    	</el-form-item>
			    	<el-form-item>
			    		<el-button icon="el-icon-refresh" @click="resetHouseForm('houseFilters')">重置</el-button>
			    	</el-form-item>
				</span>
			</el-form>
		</div>
		<!--toolbar-->
		<el-row id="toolbar_house">
			<el-col :span="24">
				<div class="grid-content bg-purple-light">
					<el-button type="primary" size="mini" icon="el-icon-edit" @click="handleAddHouse">新增</el-button>
					<el-button type="primary" size="mini" @click="batchRemoveHouse" :disabled="this.houseSels.length===0" icon="el-icon-delete">批量删除</el-button>
					<el-button type="primary" size="mini" @click="templeteDownHouse" icon="el-icon-download">模板下载</el-button>
					<el-button type="primary" size="mini" @click="templeteUpHouse" icon="el-icon-upload">导入</el-button>
					<el-button type="primary" size="mini" @click="handoverHouse" :disabled="this.houseSels.length!=1" icon="el-icon-sort">移交</el-button>
				</div>
			</el-col>
		</el-row>

		<!--列表-->
		<el-table :data="unitHouseDatas" id="houseDataGrid" empty-text=" " height="410" border stripe size="mini" :header-row-class-name="headStyle" highlight-current-row v-loading="listhouseLoading" :row-class-name="tableRowClassName" @sort-change="handleHouseSortChange" @selection-change="selsChangeHouse" style="width: 100%;">
			<el-table-column type="selection" width="45"></el-table-column>
			<el-table-column prop="index" :formatter="index_formatter" label="序号" width="60"></el-table-column>
			<el-table-column prop="unitName" label="所属单元" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="buildingName" label="所属楼名称" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="houseName" label="房屋名称" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="houseTypeName" label="户型" width="100" show-overflow-tooltip></el-table-column>
			<el-table-column prop="houseStatusName" label="房屋状态" width="100" show-overflow-tooltip></el-table-column>
			<el-table-column prop="giveDate" label="交房日期" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="proertyEndtime" label="物业费截止日期" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="buildSize" label="建筑面积" width="100" show-overflow-tooltip></el-table-column>
			<el-table-column prop="useSize" label="使用面积" width="100" show-overflow-tooltip></el-table-column>
			<el-table-column prop="floor" label="所属楼层" width="100" show-overflow-tooltip></el-table-column>
			<el-table-column prop="sort" label="排序" v-if="false"></el-table-column>
			<el-table-column label="操作" width="160">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEditHouse(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="mini" @click="handleDelHouse(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
			<el-table-column width="auto" label=""></el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar" id="housepageDiv">
			<el-pagination small background :current-page="housepage" @current-change="handleHouseCurrentChange" @size-change="handleHouseSizeChange" :page-sizes="[10, 20, 50, 100]" :page-size="housepageSize" :total="housetotal" layout="total,sizes, prev, pager, next" style="float:right;"></el-pagination>
		</el-col>

		<!--编辑界面-->
		<el-dialog title="编辑" :visible.sync="editHouseFormVisible" :close-on-click-modal="false" @close="resetForm('editHouseForm')">
			<el-form :model="editHouseForm" label-width="120px" :rules="addHouseFormRules" ref="editHouseForm" size="mini">
				<el-input v-model="editHouseForm.buildingId" type="hidden" style="display: none!important;"></el-input>
				<el-input v-model="editHouseForm.unitId" type="hidden" style="display: none!important;"></el-input>
				<el-form-item label="房屋名称" prop="houseName">
					<el-input v-model="editHouseForm.houseName" auto-complete="off" placeholder="请输入房屋名称"></el-input>
				</el-form-item>
				<el-form-item label="户型" prop="houseType">
					<el-select size="small" v-model="editHouseForm.houseType" clearable placeholder="请选择">
						<el-option v-for="item in houseTypeOptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="房屋状态" prop="status">
					<el-select size="small" v-model="editHouseForm.status" clearable placeholder="请选择">
						<el-option v-for="item in houseStatusOptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="交房日期" prop="giveDate">
					<el-date-picker type="date" placeholder="选择交房日期" v-model="editHouseForm.giveDate" style="width: 100%;" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
				</el-form-item>
				<el-form-item label="物业费截止日期" prop="proertyEndtime">
					<el-date-picker type="date" placeholder="选择物业费截止日期" v-model="editHouseForm.proertyEndtime" style="width: 100%;" value-format="yyyy-MM-dd hh:mm:ss" format="yyyy-MM-dd"></el-date-picker>
				</el-form-item>
				<el-form-item label="建筑面积" prop="buildSize">
					<el-input v-model.number="editHouseForm.buildSize" auto-complete="off" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="使用面积" prop="useSize">
					<el-input v-model.number="editHouseForm.useSize" auto-complete="off" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="所属楼层" prop="floor">
					<el-input v-model.number="editHouseForm.floor" auto-complete="off" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="序号" prop="sort">
					<el-input v-model.number="editHouseForm.sort" auto-complete="off" placeholder="请输入"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editHouseFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editHouseSubmit" :loading="editHouseLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--新增界面-->
		<el-dialog title="新增" :visible.sync="addHouseFormVisible" :close-on-click-modal="false" @close="resetForm('addHouseForm')">
			<el-form :model="addHouseForm" label-width="120px" :rules="addHouseFormRules" ref="addHouseForm" size="mini">
				<el-input v-model="addHouseForm.buildingId" type="hidden" style="display: none!important;"></el-input>
				<el-input v-model="addHouseForm.unitId" type="hidden" style="display: none!important;"></el-input>
				<el-form-item label="房屋名称" prop="houseName">
					<el-input v-model="addHouseForm.houseName" auto-complete="off" placeholder="请输入房屋名称"></el-input>
				</el-form-item>
				<el-form-item label="户型" prop="houseType">
					<el-select size="small" v-model="addHouseForm.houseType" clearable placeholder="请选择">
						<el-option v-for="item in houseTypeOptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="房屋状态" prop="status">
					<el-select size="small" v-model="addHouseForm.status" clearable placeholder="请选择">
						<el-option v-for="item in houseStatusOptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="交房日期" prop="giveDate">
					<el-date-picker type="date" placeholder="选择交房日期" v-model="addHouseForm.giveDate" style="width: 100%;" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
				</el-form-item>
				<el-form-item label="物业费截止日期" prop="proertyEndtime">
					<el-date-picker type="date" placeholder="选择物业费截止日期" v-model="addHouseForm.proertyEndtime" style="width: 100%;" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
				</el-form-item>
				<el-form-item label="建筑面积" prop="buildSize">
					<el-input v-model.number="addHouseForm.buildSize" auto-complete="off" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="使用面积" prop="useSize">
					<el-input v-model.number="addHouseForm.useSize" auto-complete="off" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="所属楼层" prop="floor">
					<el-input v-model.number="addHouseForm.floor" auto-complete="off" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="序号" prop="sort">
					<el-input v-model.number="addHouseForm.sort" auto-complete="off" placeholder="请输入"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addHouseFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addHouseSubmit" :loading="addHouseLoading">提交</el-button>
			</div>
		</el-dialog>
		<!--导入界面-->
		<el-dialog title="导入" :visible.sync="importHouseFormVisible" :close-on-click-modal="false">
			<el-upload class="upload-demo" ref="houseUpload" accept="xls,xlsx" action="admin/unitHouse/upload" :on-preview="handlePreviewHouse" :on-remove="handleRemoveHouse" :on-success="handleSuccessHouse" :before-upload="beforeAvatarUpload" :headers="building_uploadHeader" :file-list="fileListHouse" :data="uploadParamsHouse" :auto-upload="false">
				<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
				<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUploadHouse">上传</el-button>
				<div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
			</el-upload>
		</el-dialog>

		<!--移交界面-->
		<el-dialog title="房屋移交" :visible.sync="handOverFormVisible" :close-on-click-modal="false" @close="resetForm('handOverForm')">
			<el-form :model="handOverForm" label-width="100px" :rules="handOverFormRules" ref="handOverForm" size="mini">
				<el-input v-model="handOverForm.houseId" type="hidden" style="display: none!important;"></el-input>
				<el-col :span="12">
					<el-form-item label="姓名" prop="name">
						<el-input v-model="handOverForm.name" auto-complete="off" placeholder="请输入姓名"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="手机号" prop="phone">
						<el-input v-model.number="handOverForm.phone" auto-complete="off" placeholder="请输入手机号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="身份证号" prop="cardNumber">
						<el-input v-model="handOverForm.cardNumber" auto-complete="off" placeholder="请输入身份证号"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="住址" prop="address">
						<el-input v-model="handOverForm.address" auto-complete="off" placeholder="请输入住址"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="性别" prop="sex">
						<el-radio-group v-model="handOverForm.sex">
							<el-radio label="0">男</el-radio>
							<el-radio label="1">女</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-input type="hidden"></el-input>
				</el-col>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="handOverFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="handOverFormSubmit" :loading="addHouseLoading">确定</el-button>
			</div>
		</el-dialog>

	</div>
</template>
<script>
	import { getToken, setToken, removeToken } from '@/util/auth'
	import request from '@/router/axios'
	export default {
		name: "unitHouseList",
		data() {
			return {
				houseTypeOptions: [],
				houseStatusOptions: [],
				houseFilters: {
					houseName: ''
				},
				url: {
					//房屋数据
					houseList: "/admin/unitHouse/page",
					houseDel: '/admin/unitHouse/doDel',
					houseBatchDel: '/admin/unitHouse/doBatchDel',
					houseSave: '/admin/unitHouse/doAdd',
					houseEdit: '/admin/unitHouse/doUpdate'
				},

				unitHouseDatas: [],
				fileListHouse: [],
				//房屋列表数据
				housesort: {
					sort: 'sort',
					order: 'asc'
				},
				treeId: "",
				treeLevel: "",
				communityId: "",
				buildingId: "",
				existUnit: "",
				housetotal: 0,
				housepage: 1,
				housepageSize: 10,
				listhouseLoading: false,
				houseSels: [],
				uploadParamsHouse: {},
				editHouseFormVisible: false,
				importHouseFormVisible: false,
				editHouseLoading: false,
				addHouseLoading: false,
				addHouseFormVisible: false,
				handOverFormVisible: false,
				handOverFormRules: {
					phone: [{
							required: true,
							message: "请输入手机号码"
						},
						{
							pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
							message: "手机号码格式不正确"
						}
					],
					name: [{
						type: 'string',
						required: true,
						message: '请输入业主姓名'
					}],
					cardNumber: [{
						pattern: /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/,
						message: "身份证格式不正确"
					}]
				},
				addHouseFormRules: {
					houseName: [{
						type: 'string',
						required: true,
						message: '请房屋名称'
					}],
					giveDate: [{
						type: 'string',
						required: false,
						message: '请选择交房日期',
						trigger: 'change'
					}],
					proertyEndtime: [{
						type: 'string',
						required: true,
						message: '请选择物业费截止日期',
						trigger: 'change'
					}],
					buildSize: [{
							type: 'number',
							message: '请输入数字'
						},
						{
							required: true,
							message: '请输入建筑面积'
						}
					],
					floor: [{
							type: 'number',
							message: '请输入数字'
						},
						{
							required: true,
							message: '请输入所在楼层'
						}
					],
					useSize: [{
						type: 'number',
						message: '请输入数字'
					}],
					sort: [{
						type: 'number',
						message: '请输入数字'
					}]
				},
				//新增界面数据
				addHouseForm: {},
				//新增界面数据
				editHouseForm: {},
				handOverForm: {

				},
				building_uploadHeader: {
					'Authorization': "Bearer " + getToken()
				}
			}
		},
		methods: {
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			handleHouseSortChange(sort) {
				this.housesort = {
					sort: sort.prop,
					order: sort.order == 'ascending' ? 'asc' : 'desc'
				};
				this.getUnitHouse();
			},

			tableRowClassName(row, index) {
				//把每一行的索引放进row
				row.index = row.rowIndex;
			},
			headStyle({
				row,
				rowIndex
			}) {
				return "table_head_style";
			},
			index_formatter: function(row, column, cellValue, index) {
				//放回索引值
				return(this.housepageSize * (this.housepage - 1) + 1 + index);
			},
			handleHouseCurrentChange(val) {
				this.housepage = val;
				this.getUnitHouse();
			},
			handleHouseSizeChange(val) {
				this.housepageSize = val;
				this.housepage = 1;
				this.getUnitHouse();
			},
			resetHouseForm(formName) {
				this.houseFilters = {
					houseName: ''
				}
			},

			selsChangeHouse: function(sels) {
				this.houseSels = sels;
			},

			beforeAvatarUpload(file) {
				const isXls = file.type === 'application/vnd.ms-excel';
				const isXlsx = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
				if(!isXls && !isXlsx) {
					this.$message.error('格式不正确!');
				}

				return isXls || isXlsx;
			},
			templeteDownHouse() {
				location.href = "/static/templates/house.xls";
			},
			templeteUpHouse() {
				this.fileListHouse = [];
				if(this.treeLevel == 2) {
					this.uploadParamsHouse = {
						buildingId: this.treeId,
						communityId: this.communityId
					};
				} else {
					this.uploadParamsHouse = {
						unitId: this.treeId,
						buildingId: this.buildingId,
						communityId: this.communityId
					};
				}

				this.importHouseFormVisible = true;
			},
			submitUploadHouse() {
				if(this.$refs.houseUpload.uploadFiles.length==0){
	    			this.$message({ message: "请先选择上传的文件。",type: 'info',duration: 2000});
	    			return;
	    		}
				this.$refs.houseUpload.submit();
			},
			handleRemoveHouse(file, fileList) {
				console.log(file, fileList);
			},
			handlePreviewHouse(file) {
				console.log(file);
			},
			handleSuccessHouse(response, file, fileList) {
				if(!response.success) {
					this.$message.error(response.msg);
				} else {
					this.$message({
						message: response.msg,
						type: 'success',
						duration: 1500
					});
				}
				this.fileListHouse = [];
				this.importHouseFormVisible = false;
				//刷新列表
				this.getUnitHouse();
			},

			//批量删除单元
			batchRemoveHouse: function() {
				var ids = this.houseSels.map(item => item.id).toString();
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listhouseLoading = true;
					let para = {
						ids: ids
					};
					request.get(this.url.houseBatchDel, {
						params: para
					}).then((res) => {
						this.listhouseLoading = false;
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1500
						});
						this.getUnitHouse();
					});
				}).catch(() => {});
			},

			//删除
			handleDelHouse: function(index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listhouseLoading = true;
					let para = {
						id: row.id
					};
					request.get(this.url.houseDel, {
						params: para
					}).then((res) => {
						this.listhouseLoading = false;
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1500
						});
						this.getUnitHouse();
					});
				}).catch(() => {

				});
			},
			//显示编辑界面
			handleEditHouse: function(index, row) {
				this.editHouseFormVisible = true;
				this.editHouseForm = Object.assign({}, row);
			},
			//显示新增界面
			handleAddHouse: function() {
				this.addHouseFormVisible = true;
				if(this.treeLevel == 2) {
					this.addHouseForm = {
						communityId: this.communityId,
						buildingId: this.treeId
					};
				} else {
					this.addHouseForm = {
						communityId: this.communityId,
						buildingId: this.buildingId,
						unitId: this.treeId
					};
				}

			},
			//编辑
			editHouseSubmit: function() {
				this.$refs.editHouseForm.validate((valid) => {
					if(valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editHouseLoading = true;
							let para = Object.assign({}, this.editHouseForm);
							request.post(this.url.houseEdit, para).then((res) => {
								this.editHouseLoading = false;
								if(!res.data.data) {
									this.$message({
										message: res.data.msg,
										type: 'error',
										duration: 1500
									});
									return;
								}
								this.$message({
									message: '提交成功',
									type: 'success',
									duration: 1500
								});
								this.$refs['editHouseForm'].resetFields();
								this.editHouseFormVisible = false;
								this.getUnitHouse();
							});
						});
					}
				});
			},
			//新增
			addHouseSubmit: function() {
				this.$refs.addHouseForm.validate((valid) => {
					if(valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addHouseLoading = true;
							let param = Object.assign({}, this.addHouseForm);
							request.post(this.url.houseSave, param).then((res) => {
								this.addHouseLoading = false;
								if(!res.data.data) {
									this.$message({
										message: res.data.msg,
										type: 'error',
										duration: 1500
									});
									return;
								}
								this.$message({
									message: '提交成功',
									type: 'success',
									duration: 1500
								});
								this.$refs['addHouseForm'].resetFields();
								this.addHouseFormVisible = false;
								this.getUnitHouse();
							});
						});
					}
				});
			},
			handoverHouse() {
				this.handOverFormVisible = true;
				this.handOverForm.houseId = this.houseSels[0].id;
			},
			//房屋移交
			handOverFormSubmit() {
				this.$refs.handOverForm.validate((valid) => {
					if(valid) {
						this.addHouseLoading = true;
						let param = Object.assign({}, this.handOverForm);
						request.post("/admin/houseOwner/handOverHouse", param).then((res) => {
							if(res.data.success) {
								this.addHouseLoading = false;
								this.handOverFormVisible = false;
								this.$message({
									message: '移交成功',
									type: 'success',
									duration: 1500
								});
								this.getUnitHouse();
							} else {
								this.addHouseLoading = false;
								this.$message({
									message: res.data.msg,
									type: 'info',
									duration: 1500
								});
							}

						});
					}
				});

			},
			getUnitHouse(flag) {
				//获取当前树节点选中单元
				//              var data = this.$refs.tree.getCurrentNode();
				if(flag){
      				this.housepage = 1;
      			}
				let para = {
					params: {
						page: this.housepage,
						limit: this.housepageSize,
						//排序
						orderByField: this.housesort.sort,
						isAsc: this.housesort.order,
						houseName: this.houseFilters.houseName,
						unitId: this.treeId,
						existUnit: this.existUnit
					}
				};
				this.listhouseLoading = true;
				request.get(this.url.houseList, para).then((res) => {
					this.housetotal = res.data.total;
					var datas = res.data.records;
					this.unitHouseDatas = datas;
					this.listhouseLoading = false;
				});
			},
			//初始化数据字典
			initDictsData: function() {
				request.get("/admin/dict/type/house_type").then((res) => {
					if(res.status === 200) {
						this.houseTypeOptions = res.data;
					}
				});
				request.get("/admin/dict/type/house_status").then((res) => {
					if(res.status === 200) {
						this.houseStatusOptions = res.data;
					}
				});
			}
		},
		mounted() {
			this.getUnitHouse();
			this.initDictsData();
		}
	};
</script>